<template>
    <div class="divBox">
      <br>
      <div>
        <span style="font-size: 12px ;font-weight: bold" >创建灵感文</span>
      </div>


      <div>
        <span style="color: rgba(0,0,0,0.4);">文章标题:</span>
        <el-input v-model="inspiration.title"  style="width:500px;margin-left: 15px" placeholder="请输入内容" size="small" ></el-input>
      </div>
      <br>
      <div class="div">
        <br>
        <span style="color: rgba(0,0,0,0.4);">上传封面:</span>
        <el-upload
          class="upload-demo"
          id="up"
          action=''
          :http-request="uploadImg"
        >
          <el-button size="small" type="primary"  >点击上传</el-button>

        </el-upload>
    </div>
      <br>
      <br>
      <br>
      <br>
      <div>
        <span style="color: rgba(0,0,0,0.4);">文章内容</span>
      </div>
      <br>
      <quill-editor class="editor"
                    v-model="inspiration.details"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)">
      </quill-editor>
      <br>
      <div>
        <el-button type="primary" size="small "  @click="insert()">确认创建</el-button>

        <el-button type="info" size="small" plain>取消</el-button>
      </div>

</div>




</template>

<script>
import {upload ,add} from "@/api/inspiration";
import  { mapGetters } from "vuex";
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']

  // remove formatting button
]


export default {
  name: "createInspiration",
  computed:{
   ...mapGetters(["name"])
  },
  data(){
    return{
      editorOption: {
        placeholder: '',
        theme: 'snow',  // or 'bubble'
        modules: {
          toolbar: {
            container: toolbarOptions,  // 工具栏
          }
        }
      },
      inspiration:{
        title:'',
        image:'',
        author:'',
        authorImg:'',
        details:'',

      }

    }
  },methods:{
/*    handleAvatarSuccess(res, file) {
      this.url = URL.createObjectURL(file.raw);

    }*/

    uploadImg(val){
      let param = new FormData();
      param.append("file",val.file)
      upload(param).then(res=>{
      this.inspiration.image = res;
        this.inspiration.authorImg=res;




      })
    }
    ,insert(){
      this.inspiration.author = this.name
      add(this.inspiration).then(res=>{
          alert("成功！")
        this.$router.push('/inspiration/index')

      })

    }

  }

}
</script>

<style scoped>
#up{

}
.div{
  position: relative;
}
.div #up{
  position: absolute;
  top: 5px;
  left: 70px;

}

</style>
